<template>
	<div class="box info">
		<component v-if="activeCpn" :is="activeCpn" />
		<template v-else>info</template>
	</div>
</template>

<script lang="ts" setup>
import { type Component, shallowRef } from "vue";
import { useNodeData } from "../../composables";

const activeCpn = shallowRef<Component>();

const { node } = useNodeData();

const setComponent = (cpn: Component) => (activeCpn.value = cpn);

node.data.setComponent = setComponent;
</script>

<style lang="scss" scoped>
.box {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.info {
	background: #edffe5;
	border-radius: 6px;
	border: 1px solid #52c41a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
}
</style>
